<template>
  <el-row class="vc-search">
    <el-form :model="model" :label-width="labelWidth" ref="searchForm" onsubmit="return false" inline>
      <el-collapse-transition v-if="more">
        <div v-show="open">
          <div class="form" ref="spreadForm">
            <slot></slot>
            <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
              <el-form-item label=" ">
                <el-button type="primary" @click="search()">提交</el-button>
                <el-button @click="resetForm()">重置</el-button>
              </el-form-item>
            </el-col>
          </div>
        </div>
      </el-collapse-transition>
      <div class="action">
        <el-button v-if="more" icon="el-icon-d-arrow-right" @click="open=!open" class="more" :class="{open}"></el-button>
        <slot name="main"></slot>
        <el-button icon="el-icon-search" @click="search()"></el-button>
        <slot name="append"></slot>
      </div>
      <input type="submit" class="submit" @click="search()">
    </el-form>
  </el-row>
</template>

<script>
  /**
   * 搜索区域，用法和 el-form 相似
   * 
   * props: 
   *    model  同 el-form
   *    label-width 同 el-form  默认80 最大120
   * 
   * events：
   *    search  搜索
   *    reset-form  重置表单，用于某些没有双向绑定的控件
   * slot：
   *    default  用于 search-item 组件
   *    main     默认展示的搜索控件
   *    append   位于搜索按钮后面（主要用于导出等操作按钮）
   */
  export default {
    name: 'Search',
    props: {
      model: Object,
      labelWidth: String
    },
    data() {
      return {
        open: false,  //是否展开更多搜索条件
        more: true
      }
    },
    mounted() {
      this.more = this.$refs['spreadForm'].children.length > 1
    },
    methods: {
      search() {
        this.$emit('search', 1)
      },
      resetForm() {
        this.$refs['searchForm'].resetFields()
        this.$emit('reset-form') 
      }
    }
  }
</script>

<style lang="scss">
  .vc-search {
    margin: -15px -15px 0 -15px;
    .form {
      padding: 10px 10px 0;
      background: #E8EDF0;
      .el-form-item__label {
        width: 80px;
        max-width: 100px; //最多六个字的宽度
      }
      .el-form-item__content {
        max-width: 250px; //最长日期范围选择控件的宽度
      }
    }
    .action {
      padding: 10px 15px;
      text-align: right;
      .more {
        float: left;
        .el-icon-d-arrow-right {
          transform: rotateZ(-90deg)
        }
        &.open .el-icon-d-arrow-right{
          transform: rotateZ(90deg)
        }
      }
      .el-input {
        width: auto;
      }
      &>* {
        margin-left: 4px;
      }
    }
    .el-col {
      float: none;
      display: inline-block;
    }
    .el-date-editor {
      max-width: 240px;
    }
    .submit {
      display: none;
      width: 0;
      height: 0;
    }
  }
</style>